<template>
	<div>
		我的第一个新菜单页面
		<a-space wrap>
			<a-button type="primary">Primary Button</a-button>
			<a-button>Default Button</a-button>
			<a-button type="dashed">Dashed Button</a-button>
			<a-button type="text">Text Button</a-button>
			<a-button type="link">Link Button</a-button>
		</a-space>
		<a-checkbox v-model:checked="checked">Checkbox</a-checkbox>
		<home-outlined />
		<LayoutOutlined />
		<FastForwardOutlined />
		<LikeOutlined />
		<div class="divider">
			<h3>分割线</h3>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
				merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen,
				quo modo.
			</p>
			<a-divider />
			<a-divider orientation="left">With Text</a-divider>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
				merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen,
				quo modo.
			</p>
			<a-divider>With Text</a-divider>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
				merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen,
				quo modo.
			</p>
			<a-divider dashed />
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne
				merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen,
				quo modo.
			</p>
		</div>
	</div>
</template>

<script setup>
import { ref } from "vue";
import {
	FastForwardOutlined,
	LayoutOutlined,
	HomeOutlined,
	LikeOutlined,
} from "@ant-design/icons-vue";
const checked = ref(false);
</script>

<style scoped>
.divider {
	padding: 20px;
	/* border: 1px solid red; */
	text-align: center;
}
h3 {
	font-weight: bold;
	font-size: 25px;
}
</style>
